<template>
  <div class="icon-date-wrapper">
    <icon-calendar @click="showDatePicker" />
    <div class="date-picker-mask" :style="{ display: displayBlock }" @click="hideDatePicker"></div>
    <div class="icon-date-picker" :class="{'calendar-disable-ok': isDisableOk}" :style="{display: displayBlock, ...displayStyle}">
      <ga-range-picker  hide-trigger showOk v-model:pickerValue="selectTimeRange" showTime @change="handleChange" @ok="onStandaloneOk">
        <!-- <template #extra>
          <div class="picker-footer">
            <a-link href="link" :hoverable="false">Link</a-link>
            <a-link href="link" :hoverable="false">Link</a-link>
          </div>
        </template> -->
      </ga-range-picker>
      <div class='out_range_tip' :style="{ display: isDisableOk ? 'block' : 'none' }">自定义时间选择范围在5分钟~7天之内</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
const dateTime = 'YYYY-MM-DD HH:mm:ss'


const props = defineProps({
  timeInfo: {
    type: Object,
    default: () => ({})
  }
})

const emits = defineEmits('on-change')
const displayBlock = ref('none')
const displayStyle = ref({})
const selectTimeRange = ref([dayjs().subtract(1, 'days'), dayjs()])
const isDisableOk = ref(false)

watch(() => props.timeInfo, (newV) => {

  selectTimeRange.value = [dayjs(newV?.from), dayjs(newV?.to)]
})


const showDatePicker = (e) => {
  const { right, bottom } = e.target.getBoundingClientRect();
  displayStyle.value = {
    left: `${right - 550}px`,
    top: `${bottom - 164}px`
  };
  displayBlock.value = (displayBlock.value === 'none' ? 'block' : 'none');
}
const hideDatePicker = () => {
  displayBlock.value = 'none'
}

/**
    * 选择自定义时间选择的回调
    * 时间不在5分钟～7天之内的，确定按钮置灰
    */
const handleChange = (data) => {
  if (data.length > 1) {
    const chooseDiff = data[1].valueOf() - data[0].valueOf();
    const minDuration = 5 * 60000;
    const maxDuration = 7 * 24 * 60 * 60000;
    // setIsDisableOk(chooseDiff < minDuration || chooseDiff > maxDuration);
    isDisableOk.value = chooseDiff < minDuration || chooseDiff > maxDuration
  } else {
    isDisableOk.value = false
    // setIsDisableOk(false);
  }
  selectTimeRange.value = data
}
const onStandaloneOk = (data) => {
  if (isDisableOk.value) return;
  const to = data[1];
  const from = data[0];
  console.log(data, 'data');

  const diff = to.valueOf() - from.valueOf();
  const inputValue = `${from} - ${to}`
  displayBlock.value= 'none';
  const timeObj = {
    inputValue,
    from: from,
    to: to,
    diff: diff,
    sliderValue: null,
    time: inputValue
  }
  emits('on-change', timeObj);
}
</script>

<style scoped lang="scss">
.icon-date-wrapper {
  position: relative;
  .date-picker-mask {
    width: 100vw;
        height: 100vh;
        background-color: #FFFFFF00;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        z-index: 1110;
  }
  .icon-date-picker {
    position: fixed;
        z-index: 1111;
  }
  .calender_disable_ok .rc-calendar-ok-btn,
.calender_disable_ok .rc-calendar-ok-btn:hover {
    color: rgba(0, 0, 0, 0.25);
    cursor: no-drop;
}
.calender_disable_ok .out_range_tip {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 12px;
}
}
</style>
